<!--
  Copyright © 2017 Cask Data, Inc.

  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
-->

<div class="pipeline-configurations-content modeless-container">
  <div class="pipeline-configurations-header modeless-header">
    <div class="modeless-title">
      Configure
      <span ng-if="RealtimePipelineConfigCtrl.pipelineName.length > 0">
        "{{RealtimePipelineConfigCtrl.pipelineName}}"
      </span>
    </div>
    <div class="btn-group">
      <a class="btn" ng-click="RealtimePipelineConfigCtrl.onClose()">
        <span class="fa fa-remove"></span>
      </a>
    </div>
  </div>
  <div class="pipeline-configurations-body modeless-content">
    <div class="configurations-side-panel">
      <div class="configurations-tabs">
        <div class="configuration-tab"
              ng-class="{'active': RealtimePipelineConfigCtrl.activeTab === 'runtimeArgs'}"
              ng-click="RealtimePipelineConfigCtrl.activeTab = 'runtimeArgs'"
              ng-if="RealtimePipelineConfigCtrl.isDeployed || RealtimePipelineConfigCtrl.showPreviewConfig">
          Runtime arguments
        </div>
        <div class="configuration-tab"
              ng-class="{'active': RealtimePipelineConfigCtrl.activeTab === 'previewConfig'}"
              ng-click="RealtimePipelineConfigCtrl.activeTab = 'previewConfig'"
              ng-if="!RealtimePipelineConfigCtrl.isDeployed && RealtimePipelineConfigCtrl.showPreviewConfig">
          Preview config
        </div>
        <div class="configuration-tab toggle-advanced-options"
              ng-click="RealtimePipelineConfigCtrl.showAdvanced = !RealtimePipelineConfigCtrl.showAdvanced"
              ng-if="RealtimePipelineConfigCtrl.isDeployed || RealtimePipelineConfigCtrl.showPreviewConfig">
          <span class="fa"
                ng-class="{'fa-caret-down': RealtimePipelineConfigCtrl.showAdvanced, 'fa-caret-right': !RealtimePipelineConfigCtrl.showAdvanced}">
           </span>
          Advanced options
        </div>
        <div class="advanced-options"
              ng-show="RealtimePipelineConfigCtrl.showAdvanced || !RealtimePipelineConfigCtrl.isDeployed && !RealtimePipelineConfigCtrl.showPreviewConfig">
          <div class="configuration-tab"
                ng-class="{'active': RealtimePipelineConfigCtrl.activeTab === 'pipelineConfig'}"
                ng-click="RealtimePipelineConfigCtrl.activeTab = 'pipelineConfig'">
            Pipeline config
          </div>
          <div class="configuration-tab"
                ng-class="{'active': RealtimePipelineConfigCtrl.activeTab === 'engineConfig'}"
                ng-click="RealtimePipelineConfigCtrl.activeTab = 'engineConfig'">
            Engine config
          </div>
          <div class="configuration-tab"
                ng-class="{'active': RealtimePipelineConfigCtrl.activeTab === 'resources', 'disabled': RealtimePipelineConfigCtrl.showPreviewConfig}"
                ng-click="RealtimePipelineConfigCtrl.activeTab = 'resources'">
            Resources
          </div>
        </div>
      </div>
    </div>

    <div class="configuration-content">
      <div class="configuration-step-content configuration-content-container"
            id="runtime-arguments-tab-content"
            ng-if="RealtimePipelineConfigCtrl.activeTab === 'runtimeArgs'">
        <my-pipeline-runtime-args
          runtime-arguments="RealtimePipelineConfigCtrl.runtimeArguments"
          contains-macros="RealtimePipelineConfigCtrl.containsMacros"
          resolved-macros="RealtimePipelineConfigCtrl.resolvedMacros">
        </my-pipeline-runtime-args>
      </div>

      <div class="configuration-step-content configuration-content-container realtime-content"
            id="preview-config-tab-content"
            ng-if="RealtimePipelineConfigCtrl.activeTab === 'previewConfig'">
        <div class="step-content-heading">
          Set how long you want to run your preview
        </div>
        <div class="label-with-toggle timeout-in-minutes row">
          <span class="toggle-label col-xs-4">Time to run preview</span>
          <my-number-widget
            ng-model="RealtimePipelineConfigCtrl.timeoutInMinutes"
            config="RealtimePipelineConfigCtrl.numberConfig"
          ></my-number-widget>
          <span class="control-label min">min</span>
          <i class="fa fa-info-circle"
             uib-tooltip="Number of minutes to run Realtime pipeline preview. It can be run for a maximum of 15 mins."
             tooltip-placement="right">
        </div>
      </div>

      <div class="configuration-step-content"
            id="pipeline-config-tab-content"
            ng-if="RealtimePipelineConfigCtrl.activeTab === 'pipelineConfig'">
        <div class="step-content-heading">
          Set configurations for this pipeline
        </div>
        <div class="label-with-toggle batch-interval form-group row">
          <span class="toggle-label col-xs-4">Batch interval</span>
          <div class="col-xs-7">
            <select class="form-control small-dropdown"
                    ng-model="RealtimePipelineConfigCtrl.batchIntervalTime"
                    ng-options="option as option for option in RealtimePipelineConfigCtrl.batchIntervalTimeOptions"
                    ng-change="RealtimePipelineConfigCtrl.updatePipelineEditStatus()">
            </select>
            <select class="form-control small-dropdown batch-interval-unit"
                    ng-model="RealtimePipelineConfigCtrl.batchIntervalUnit"
                    ng-options="optionKey as optionVal for (optionKey,optionVal) in RealtimePipelineConfigCtrl.batchIntervalUnits"
                    ng-change="RealtimePipelineConfigCtrl.updatePipelineEditStatus()">
            </select>
          </div>
        </div>
        <div class="label-with-toggle checkpointing row">
          <span class="toggle-label col-xs-4">Checkpointing</span>
          <div class="col-xs-7 toggle-container">
            <toggle-switch
              is-on="!RealtimePipelineConfigCtrl.checkpointing"
              on-toggle="RealtimePipelineConfigCtrl.onCheckPointingChange"
            ></toggle-switch>
            <i class="fa fa-info-circle"
                uib-tooltip="Allows Apache Spark Streaming to checkpoint data (RDDs) to persistent storage so that the pipeline can recover from failures."
                tooltip-placement="right">
            </i>
          </div>
        </div>
        <div class="label-with-toggle checkpoint-directory row" ng-if="!RealtimePipelineConfigCtrl.checkpointing">
          <span class="toggle-label col-xs-4">Checkpoint directory</span>
          <div class="col-xs-7">
            <input
              type="text"
              class="form-control"
              placeholder="Checkpoint directory"
              ng-model="RealtimePipelineConfigCtrl.checkpointDir" />
          </div>
        </div>
        <div class="label-with-toggle instrumentation row">
          <span class="toggle-label col-xs-4">Instrumentation</span>
          <div class="col-xs-7 toggle-container">
            <toggle-switch
              is-on="RealtimePipelineConfigCtrl.instrumentation"
              on-toggle="RealtimePipelineConfigCtrl.onInstrumentationChange"
            ></toggle-switch>
            <i class="fa fa-info-circle"
                uib-tooltip="Emits timing metrics such as total time, mean, and and standard deviation for pipeline stages. It is recommended to always have this setting on, unless the environment is short on resources."
                tooltip-placement="right">
            </i>
          </div>
        </div>
      </div>
      <div class="configuration-step-content realtime-content"
            id="resources-tab-content"
            ng-if="RealtimePipelineConfigCtrl.activeTab === 'resources'">
        <div class="step-content-heading">
          Specify the resources for the following processes of the Spark program
        </div>
        <div class="col-xs-4 client">
          <span class="resource-title">
            Client
          </span>
          <i class="fa fa-info-circle"
              uib-tooltip="Resources for the client process which launches the Apache Spark Streaming pipeline"
              tooltip-placement="right">
          </i>
          <div class="resource-holder">
            <div
              action-creator="RealtimePipelineConfigCtrl.actionCreator"
              store="RealtimePipelineConfigCtrl.store"
              resource-type="clientResource"
              on-memory-change="RealtimePipelineConfigCtrl.onClientMemoryChange"
              on-core-change="RealtimePipelineConfigCtrl.onClientCoreChange"
              virtual-cores-value="RealtimePipelineConfigCtrl.clientResources.virtualCores"
              memory-mb-value="RealtimePipelineConfigCtrl.clientResources.memoryMB"
              my-pipeline-resource-factory
            ></div>
          </div>
        </div>
        <div class="col-xs-4 driver">
          <span class="resource-title">
            Driver
          </span>
          <i class="fa fa-info-circle"
              uib-tooltip="Resources for the Apache Spark driver process which initializes the pipeline"
              tooltip-placement="right">
          </i>
          <div class="resource-holder">
            <div
              action-creator="RealtimePipelineConfigCtrl.actionCreator"
              store="RealtimePipelineConfigCtrl.store"
              resource-type="driverResource"
              on-memory-change="RealtimePipelineConfigCtrl.onDriverMemoryChange"
              on-core-change="RealtimePipelineConfigCtrl.onDriverCoreChange"
              virtual-cores-value="RealtimePipelineConfigCtrl.driverResources.virtualCores"
              memory-mb-value="RealtimePipelineConfigCtrl.driverResources.memoryMB"
              my-pipeline-resource-factory
            ></div>
          </div>
        </div>
        <div class="col-xs-4 executor">
          <span class="resource-title">
            Executor
          </span>
          <i class="fa fa-info-circle"
              uib-tooltip="Resources for executor processes which run tasks in an Apache Spark pipeline"
              tooltip-placement="right">
          </i>
          <div class="resource-holder">
            <div
              action-creator="RealtimePipelineConfigCtrl.actionCreator"
              store="RealtimePipelineConfigCtrl.store"
              resource-type="executorResource"
              on-memory-change="RealtimePipelineConfigCtrl.onExecutorMemoryChange"
              on-core-change="RealtimePipelineConfigCtrl.onExecutorCoreChange"
              virtual-cores-value="RealtimePipelineConfigCtrl.executorResources.virtualCores"
              memory-mb-value="RealtimePipelineConfigCtrl.executorResources.memoryMB"
              my-pipeline-resource-factory
            ></div>
          </div>
        </div>
      </div>

      <div class="configuration-step-content configuration-content-container realtime-content"
            id="engine-config-tab-content"
            ng-if="RealtimePipelineConfigCtrl.activeTab === 'engineConfig'">
        <fieldset ng-disabled="RealtimePipelineConfigCtrl.isDeployed">
          <div class="step-content-heading">
            Select the type of engine running your realtime pipeline
          </div>
          <div class="label-with-toggle backpressure row">
            <span class="toggle-label col-xs-4">Backpressure</span>
            <div class="col-xs-7 toggle-container">
              <toggle-switch
                is-on="RealtimePipelineConfigCtrl.backpressure"
                is-disabled="RealtimePipelineConfigCtrl.isDeployed"
                on-toggle="RealtimePipelineConfigCtrl.onBackpressureChange"
              ></toggle-switch>
              <i class="fa fa-info-circle"
                 uib-tooltip="Allows the Apache Spark Streaming engine to control the receiving rate based on the current batch scheduling delays and processing times so that the system receives only as fast as the system can process."
                 tooltip-placement="right">
              </i>
            </div>
          </div>
          <div class="label-with-toggle numExecutors form-group row">
            <span class="toggle-label col-xs-4">Number of executors</span>
            <div class="col-xs-7">
              <select class="form-control small-dropdown"
                  ng-model="RealtimePipelineConfigCtrl.numExecutors"
                  ng-options="option as option for option in RealtimePipelineConfigCtrl.numExecutorsOptions">
              </select>
              <i class="fa fa-info-circle"
                 uib-tooltip="The number of executors to allocate for this pipeline on Apache Yarn."
                 tooltip-placement="right">
              </i>
            </div>
          </div>
        </fieldset>
        <div class="add-custom-config">
          <span ng-hide="RealtimePipelineConfigCtrl.isDeployed">
            <a class="add-custom-config-label"
                ng-click="RealtimePipelineConfigCtrl.showCustomConfig = !RealtimePipelineConfigCtrl.showCustomConfig">
                <span class="fa"
                      ng-class="{'fa-caret-down': RealtimePipelineConfigCtrl.showCustomConfig, 'fa-caret-right': !RealtimePipelineConfigCtrl.showCustomConfig}">
                 </span>
                Show Custom Config
            </a>
            <i class="fa fa-info-circle"
               uib-tooltip="Enter key-value pairs of configuration parameters that will be passed to the underlying Apache Spark Streaming program."
               tooltip-placement="right">
            </i>
            <span class="float-xs-right num-rows"
                  ng-if="RealtimePipelineConfigCtrl.showCustomConfig">
                {{ RealtimePipelineConfigCtrl.numOfCustomEngineConfigFilled() }}
              <ng-pluralize
                count="RealtimePipelineConfigCtrl.numOfCustomEngineConfigFilled()"
                when="{'one': 'custom config',
                      'other': 'custom configs'}">
              </ng-pluralize>
            </span>
          </span>
          <span ng-if="(RealtimePipelineConfigCtrl.isDeployed) || (!RealtimePipelineConfigCtrl.isDeployed && RealtimePipelineConfigCtrl.showCustomConfig)">
            <hr />
            <span ng-if="RealtimePipelineConfigCtrl.isDeployed">
              <label>Custom config</label>
              <i class="fa fa-info-circle"
                 uib-tooltip="Enter key-value pairs of configuration parameters that will be passed to the underlying Apache Spark Streaming program."
                 tooltip-placement="right">
              </i>
              <span class="float-xs-right num-rows">
                  {{ RealtimePipelineConfigCtrl.numOfCustomEngineConfigFilled() }}
                <ng-pluralize
                  count="RealtimePipelineConfigCtrl.numOfCustomEngineConfigFilled()"
                  when="{'one': 'custom config',
                        'other': 'custom configs'}">
                </ng-pluralize>
              </span>
            </span>
            <div class="custom-config-labels key-value-pair-labels">
              <span class="key-label">Name</span>
              <span class="value-label">Value</span>
            </div>
            <div class="custom-config-values key-value-pair-values">
              <key-value-pairs
                key-values="RealtimePipelineConfigCtrl.customEngineConfig"
                on-key-value-change="RealtimePipelineConfigCtrl.onCustomEngineConfigChange"
              ></key-value-pairs>
            </div>
          </span>
        </div>
      </div>

      <div class="configuration-step-navigation">
        <div class="apply-action-container"
              ng-if="RealtimePipelineConfigCtrl.isDeployed || RealtimePipelineConfigCtrl.showPreviewConfig">
          <button
            class="btn btn-primary apply-action"
            ng-if="RealtimePipelineConfigCtrl.isDeployed"
            ng-disabled="RealtimePipelineConfigCtrl.buttonsAreDisabled() || RealtimePipelineConfigCtrl.startingPipeline || RealtimePipelineConfigCtrl.updatingPipeline"
            ng-click="RealtimePipelineConfigCtrl.applyAndRunPipeline()">
            <span>Save &amp; Run</span>
            <span ng-if="RealtimePipelineConfigCtrl.startingPipeline" class="fa fa-spinner fa-spin"></span>
          </button>
          <button
            class="btn btn-primary apply-action"
            ng-if="RealtimePipelineConfigCtrl.showPreviewConfig"
            ng-disabled="RealtimePipelineConfigCtrl.buttonsAreDisabled()"
            ng-click="RealtimePipelineConfigCtrl.applyAndRunPipeline()">
            <span>Save &amp; Run</span>
          </button>
          <button
            class="btn btn-secondary"
            ng-if="RealtimePipelineConfigCtrl.isDeployed && RealtimePipelineConfigCtrl.activeTab === 'runtimeArgs'"
            ng-disabled="RealtimePipelineConfigCtrl.buttonsAreDisabled()"
            ng-click="RealtimePipelineConfigCtrl.applyAndClose()">
            Save
          </button>
          <button
            class="btn btn-secondary"
            ng-if="RealtimePipelineConfigCtrl.isDeployed && RealtimePipelineConfigCtrl.activeTab !== 'runtimeArgs'"
            ng-disabled="!RealtimePipelineConfigCtrl.enablePipelineUpdate || RealtimePipelineConfigCtrl.startingPipeline || RealtimePipelineConfigCtrl.updatingPipeline || RealtimePipelineConfigCtrl.buttonsAreDisabled()"
            ng-click="RealtimePipelineConfigCtrl.updateAndClose()">
            <span ng-if="!RealtimePipelineConfigCtrl.updatingPipeline">Save</span>
            <span ng-if="RealtimePipelineConfigCtrl.updatingPipeline">Saving</span>
            <span ng-if="RealtimePipelineConfigCtrl.updatingPipeline">
              <span class="fa fa-spinner fa-spin"></span>
            </span>
          </button>
          <button
            class="btn btn-secondary"
            ng-if="RealtimePipelineConfigCtrl.showPreviewConfig"
            ng-disabled="RealtimePipelineConfigCtrl.buttonsAreDisabled()"
            ng-click="RealtimePipelineConfigCtrl.applyAndClose()">
            Save
          </button>
          <span class="num-runtime-args"
                ng-if="RealtimePipelineConfigCtrl.activeTab === 'runtimeArgs'">
              {{ RealtimePipelineConfigCtrl.runtimeArguments.pairs.length }}
            <ng-pluralize
              count="RealtimePipelineConfigCtrl.runtimeArguments.pairs.length"
              when="{'one': 'runtime argument',
                    'other': 'runtime arguments'}">
            </ng-pluralize>
          </span>
        </div>
        <div ng-if="!RealtimePipelineConfigCtrl.isDeployed && !RealtimePipelineConfigCtrl.showPreviewConfig">
          <button
            class="btn btn-primary apply-close"
            data-testid="config-apply-close"
            ng-disabled="RealtimePipelineConfigCtrl.buttonsAreDisabled()"
            ng-click="RealtimePipelineConfigCtrl.applyAndClose()">
            Save
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
